<template>
  <div class="bgwhite">
    <app-header :showLogin="false">
      <div class="">
        <router-link to="/">
        <img src="../assets/logo.png" />
        </router-link>
      </div>
    </app-header>

    <position>
      <router-link to="/">首页</router-link>
      &gt;
      <span class="last">修改密码</span>
    </position>
    <div class="hd"><steps :step="currentStep" :text="stepText"></steps></div>
   <div class="hd reset-password four-cornor-wrapper">

      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>

      <div class="register-main bgwhite" v-if="currentStep === 0">
        <h2 class="center">重置密码</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
          <el-form-item label="手机号" prop="phoneNumber" required>
            <el-input v-model="ruleForm.phoneNumber" placeholder="请输入有效的手机号" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="vcode" required>
            <el-col :span="15">
              <el-input v-model="ruleForm.vcode" placeholder="请输入验证码" ></el-input>
            </el-col>
            <el-col :span="1">&nbsp;
            </el-col>
            <el-col :span="8">
              <el-button type="default"  :disabled="vcodeDisabled" style="width:100%;" @click="getVcode">{{vcodeLabel}}</el-button>
            </el-col>
          </el-form-item>

          <el-form-item label="">
            <el-button  @click="submitForm('ruleForm')" class="btn-login sprites">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="register-main bgwhite" v-else>
        <h2 class="center">重置密码</h2>
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2"  label-width="100px">

          <el-form-item label="设置密码" prop="password" required>
            <el-input v-model="ruleForm2.password" type="password" placeholder="6-20位数字或字母密码" ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword" required>
            <el-input v-model="ruleForm2.confirmPassword"  type="password" placeholder="请确认密码"></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-button @click="submitForm2('ruleForm2')" class="btn-login sprites" fullWidth>提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- tips  -->
      <el-dialog title="提示" :visible.sync="dialog.show" size="tiny" >
        <span>{{dialog.message}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialog.fn">确 定</el-button>
        </span>
      </el-dialog>
        <app-footer></app-footer>


  </div>
</template>
<script>
import AppFooter from '../components/AppFooter'
import AppHeader from '../components/AppHeader'
import Position from '../components/Position'
import {testPhone} from '../common/js/util'
import Steps from '../components/Steps'
import {REGISTER_TIPS, commonAjax, TENANT_ID, ROLE_ID, PLATFORM_PREFIX } from '../api/api'
import md5 from 'md5'
export default {
  name: 'register',
  data () {
    return {
      vcodeDisabled: false,
      vcodeLabel: '获取验证码',
      mask_shown: true,
      REGISTER_TIPS: REGISTER_TIPS,
      stepText: ['验证手机号', '修改密码'],
      currentStep: 0,
      ruleForm: {
        phoneNumber: '',
        vcode: ''
      },
      ruleForm2: {
        password: '',
        confirmPassword: ''
      },
      rules: {
        phoneNumber: {required: true, message: '手机号不能为空'},
        vcode: {required: true, message: '验证码不能为空'}
      },
      rules2: {
        password: [{required: true, message: '密码不能为空'}, {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],
        confirmPassword: [{required: true, message: '密码不能为空'}, {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }]
      },
      dialog: {
        show: false,
        message: '',
        fn: () => {}
      }
    }
  },
  methods: {
    submitForm (form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          return false
        }
        this.$store.commit('UPDATE_LOADING')
        commonAjax([
          TENANT_ID,
          this.ruleForm.phoneNumber,
          this.ruleForm.vcode
        ], `${PLATFORM_PREFIX}.smsService`, 'validateCode').then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            this.currentStep = 1
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
      })
    },
    submitForm2 (form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          return false
        }
        if (this.ruleForm2.password !== this.ruleForm2.confirmPassword) {
          this.$message({
            message: '两次输入的密码不一致',
            type: 'error'
          })
          return false
        }
        this.$store.commit('UPDATE_LOADING')
        commonAjax([
          TENANT_ID,
          ROLE_ID,
          this.ruleForm.phoneNumber,
          md5(this.ruleForm2.password),
          md5(md5(this.ruleForm.phoneNumber) + this.ruleForm.phoneNumber.substring(3,7))
        ], `${PLATFORM_PREFIX}.registerService`, 'findPassword').then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            this.$message({
              message: '重设密码成功',
              type: 'success'
            })
            this.$router.push('/')
          } else {
            this.$message({
              message: `error code:${res.data.code}`,
              type: 'error'
            })
          }
        })
      })
    },
    argeeHandle () {
      this.mask_shown = false
    },
    disArgeeHandle () {
      this.$router.push('/')
    },
    getVcode () {
      if (!testPhone(this.ruleForm.phoneNumber)) {
        this.$message({
          message: '手机号格式有误',
          type: 'error'
        })
        return
      }
      this.vcodeDisabled = true
      commonAjax([TENANT_ID, this.ruleForm.phoneNumber, ROLE_ID], `${PLATFORM_PREFIX}.smsService`, 'getIdentifyingCodeByRegister').then(res => {
        if (res.data.code === 200) {
          this.timeout()
        } else {
          this.vcodeDisabled = false
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
    },
    timeout () {
      let start = 60
      let countDown = () => {
        this.vcodeTimer = setTimeout(() => {
          this.vcodeLabel = (start--) + 's'
          countDown()
          if (start <= 0) {
            this.vcodeDisabled = false
            this.vcodeLabel = '获取验证码'
            clearTimeout(this.vcodeTimer)
          }
        }, 1000)
      }
      countDown()
    }
  },
  components: { AppFooter, AppHeader, Steps, Position}
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.reset-password {
  height: auto;
  margin-bottom: 50px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  .register-main{
    margin: 50px auto;
    width: 400px;
    h2{
      margin: 20px 0;
      padding-left: 60px;
    }
  }
}
</style>
